2.
2024
/
( )
: 3 :75
: - ,
-
1.
2. (WWW)
-
3. - -
4. HTML ? HTML ?
-
2.
5. CSS , CSS CSS
,
?
6. (,
)
? 15
-
15 7. CSS ?
?
8. CSS ? ' HTML CSS
, CSS
?
2.
2024
/
( )
: 3 :75
: - ,
-
1.
: ? ( )
:
• (, , ) =
• (, -, ) =
• (, , ) = '
WhatsApp ' ,
:
=
-
2.
?
:
' ?
1960-70 , -
ARPANET ( )
, ,
:
•
•
•
•
•
•
•
, '
( )
, :
1.
( google.com)
2.
3.
4. '
5.
6.
!
()
2.
:
•
•
•
•
•
,
:
:
•
•
•
•
•
•
•
,
( )
2.
(WWW)
:
•
•
•
•
•
Chrome Edge ,
:
=
= '
:
•
•
•
• PDF
•
,
' :
•
• (-)
•
2.
•
•
•
•
' :
•
•
•
•
•
•
, ,
-
-
:
•
•
•
• -
•
'
-
:
2.
•
•
•
•
•
, ' :
1. TCP/IP
2.
3.
4. ( )
5.
-
:
•
•
2.
•
•
•
•
•
•
,
, , , ,
2. (WWW)
: :
,
• : , (
TCP/IP)
• : 1960
(ARPANET)
• : — , ,
—
• ' :, (FTP), , , —
,
:
WWW , '
• : ( )
2.
• :1989-1990 - ,
• :
o HTML ( )
o '
o ( , , )
o HTTP/HTTPS
WWW - ,
WWW
:
•
• '
-
'
:
,
1. : ,
2. :
3. : , , '
4. :
5. :, -
'
• :
• : ,
• :
• :-
• : ,
2.
:
•
•
, GPS
,
- '
,
, ,
— '
,
, ,
• =
• WWW =
: , ,
-
3. - -
:- ?
- '
:
1.
2.
3. HTML
4.
-
2.
- :
• PHPLanguage
•
•
• .
• .
-
'
:
•
•
?
1.
2.
3. :
4.
'
:
• '
•
•
-
- ?
- ( )
, '
- :
2.
•
:
• HTMLLanguage
• CSSLanguage
• API
-
:
" "
:
•
•
-
:
• - =
• - =
:
•
•
--
-
2.
1.
2.
3.
4.
5.
-
1.
2. /
3.
4.
( )
-
•
•
• ,
•
→
-
•
•
•
•
UI →
2.
-
:
•
•
•
•
-
( )
:
•
•
•
•
-
-
•
•
•
•
•
• UI
2.
-
•
•
•
•
•
•
:
'
- :
•
• " "
•
•
- :
•
•
•
•
- :
2.
-
-
, ,
UI
- -
- '
, -
HTML
, - '
, ,
'
4. HTML ? HTML ?
:HTML ?
• :HTML '
, , ,
• :
• : (<h1>, <p>, <img>, )
, HTML ,
-
HTML
1. :, , ,
2. :<a> -
2.
3. :,
4. : <form>, <input>, <button>
5. : ,
HTML
HTML ,
HTML 2.0
1995
;
HTML 3.2
1997
, ,
HTML 4.01
1999
CSS, , //
XHTML 1.0
2000
XML- ;
HTML5
2014
(, , ), (, ),
API,
HTML5.1
5.2
2016–
2017
ARIA , ,
HTML
, WHATWG
HTML HTML5
1. :
o HTML 4.01 ,
o HTML5 :
html
<!DOCTYPE html>
2. :
o <div> '
o HTML5 <header>, <nav>, <section>, <article> ,
3. :
o HTML 4.01 , - (
)
o HTML5 <audio> <video> '
4. :
o HTML5 , , ,
2.
5. API :
o HTML5 , -, --,
API
o
6. - :
o HTML5 ,
o -
HTML5
HTML5 :
• ' , -
• SEO
• ,
HTML HTML 2.0 3.2
HTML5 ,
• '
• HTML5 , , ,
'
, HTML
, ,
-
5. CSS , CSS CSS
,
?
:CSS ? ( )
CSS :
2.
" HTML ' "
CSS :
1. ( , , )
2. ( , , , )
CSS :
" 16px "
CSS
CSS :
{ : ; : ;}
:
+
- '
1. — “ ?”
CSS HTML
:
{ : ;}
:
p =
: " "
:
" <p> ' "
:
2.
• p →
• h1 →
• .className →
• #idName → ID
:
h1 { : ;}
: <h1>
2. — " ?"
{ }
:
p { : ; -: 16px;}
{ }
3. — “ ”
:
: ;
CSS
4. — “ ?”
:
2.
•
• -
•
•
•
•
:
: ;
5. — “ ?”
:
•
• 16
•
•
•
:
-: 16px;
:
• = -
• = 16
CSS :
h1 { : ; -: 32px; -: ;}
:
2.
• → h1
• → { ... }
• →
• → , -, -
• → , 32px,
:
" h1 , 32px, "
- ( )
CSS :
" "
:
• →
• →
• →
• →
CSS :
.- { : ;}
, CSS , ,
HTML + CSS
HTML:
<p> </p>
CSS:
p { : ; -: 18px;}
:
2.
CSS :
✔
✔ { }
✔:
✔ ;
:
{ : ;}
:
=
CSS ( )
CSS - :
1.
{ : ; }
2.
. { : ; }
3.
# { : ; }
CSS
?
CSS
:
2.
{ -: ;}
h1 { : ;}
p { -: 1.6;}
CSS = CSS
:
=
=
:
• =
• =
CSS CSS HTML '
HTML ,
,
( , , ),
, CSS
,
6. (,
)
?
: ?
• :HTML <iframe> iframe
• : (URL)
2.
• :
html
<iframe src="https://www.example.com" width="600" height="400"></iframe>
, src
,
<iframe> :
1. src URL
2. '
3.
YouTube
, Google Map,
iframes
1. :
html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>
'
2. :
html
<iframe>
src="https://www.google.com/maps/embed?..."></iframe>
3. :
html
<iframe src="https://www.wikipedia.org" width="800" height="600"></iframe>
2.
?
1.
•
(, , )
•
2.
• (, , )
•
3. -
• , ,
•
4. -
• '
•
, - :
• :
• : ,
• SEO :
• :
-
( )
- ,
()
,
2.
iframe , ,
,
, -
,
-
7. CSS ?
?
:CSS
- , , ,
- - , , ,
:
•
→
•
→
CSS
CSS ?
, :
CSS HTML
:
{ : ;}
<p> ( )
1. CSS
()
2.
'
- ,
""
-
:
• →
• →
• →
' ,
:
" "
CSS
h1 { : ;}
h2 { : ;}
h3 { : ;}
3 (
)
CSS
h1, h2, h3 { : ;}
:
2.
•
• CSS
•
•
•
, , { - : ;}
, {
: 10px;}
2. CSS
-
()
HTML
-- '
-
:
•
•
:
" "
2.
HTML
<div class="box"> <p> </p></div>
<p> </p>
CSS
. { : ;}
:
.box <p>
:
• →
• →
:
{ }
:
{ - :
;}
ul li { - : ;}
. h2 { : ;}
'
-
:
2.
. . li a { : ;}
:
•
• .
• .
:
•
•
• CSS
• HTML
•
,
1, 2
.
+
:
. h2, . p { : ;}
:
. h2 p
2.
CSS
1.
→
2.
CSS HTML
3. -
'
4.
5.
HTML:
<div class=""> <h2></h2> <p>: ₹20000</p></div>
CSS:
. h2 { : ;}
. { : ;}
( )
2.
:
= ()
= ()
CSS ,
• ' ,
• '
,
, CSS
, ,
HTML
, , ,
-
8. CSS ? ' HTML CSS
, CSS
?
:
: HTML
, HTML , '
:
• <nav> :
• <ul> (unordered list):
• <li> ( ):
• <a> ( ):
: HTML
html
<nav>>
<ul>
<li><a href="index.html"> </a></li>
2.
<li><a href="about.html"></a></li>
<li><a href="services.html"></a></li>
<li><a href="contact.html"> </a></li>
</ul>
</nav>
CSS , -
CSS
CSS
CSS :
1. :
o : ; -; '
o justify-content: --; -;
o : ; '
2. :
o
-:
o :
o
o -
3. :
o :hover pseudo-class '
o :
4. :
o - , -, -
: CSS
{
-: #333;
}
{
- -:
;
: 0;
: 0;
: ;
}
2.
{
: 0 15px;
}
{
: ;
-:
;
: 10px;
}
: {
-: #555;
-: 5px;
}
CSS ,
:
{
: ;
}
{
: 10px 0;
}
CSS
1. :
o @media
o :
2. :
o CSS :hover JavaScript /
3. :
o
o :
4. :
2.
o : ; : 0;
o : ;
CSS
• :
—-,
,
• :
• :,
• :CSS
, '
-
:
• HTML
• CSS —, , ,
• ,
HTML CSS
• HTML <nav>, <ul>, <li>, <a>
• CSS , , ,
CSS , — , ,
"
,
"
